<template>
  <div id="bridgeTunnelRiskPlatform" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 顶部标题区域 -->
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor" />
            <div class="title">
              <span class="title-text">桥隧工程人员风险管控平台</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColor"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行状态栏 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
              <div class="react-left ml-4 react-l-s">
                <span class="react-left"></span>
                <span class="text">生理监测中 <span class="update-tag">持续更新</span></span>
              </div>
            <div class="react-left ml-3 bg-color-blue">
              <span class="text">疲劳风险预警</span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right bg-color-blue mr-3">
              <span class="text fw-b">人员状态全览</span>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 主要内容区域 -->
          <div class="content-box">
            <!-- 左侧区域 -->
            <div class="left-panel">
              <!-- 人员实时状态 -->
              <div class="panel-item panel-item-small">
                <dv-border-box-12>
                  <personnelStatus />
                </dv-border-box-12>
              </div>
              
              <!-- 工人健康监控 -->
              <div class="panel-item panel-item-medium">
                <dv-border-box-12>
                  <workerHealthMonitor />
                </dv-border-box-12>
              </div>
            </div>

            <!-- 中央区域 -->
            <div class="center-panel">
              <!-- 顶部：实时数据统计（左）+ 预留区域（右） -->
              <div class="top-row">
                <div class="stats-container">
                  <dv-border-box-13>
                    <realTimeStats />
                  </dv-border-box-13>
                </div>
                
                <div class="reserved-container">
                  <dv-border-box-13>
                    <div class="reserved-placeholder">
                      <p>预留区域</p>
                      <span>此处可添加其他内容</span>
                    </div>
                  </dv-border-box-13>
                </div>
              </div>
              
              <!-- 工作区域监控 -->
              <div class="work-area-container">
                <dv-border-box-12>
                  <workAreaMonitor />
                </dv-border-box-12>
              </div>
            </div>

            <!-- 右侧区域 -->
            <div class="right-panel">
              <!-- 高危人员预警列表 -->
              <div class="panel-item">
                <dv-border-box-12>
                  <highRiskAlert />
                </dv-border-box-12>
              </div>
              
              <!-- 应急联系信息 -->
              <div class="panel-item">
                <dv-border-box-12>
                  <emergencyContact />
                </dv-border-box-12>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import personnelStatus from './components/PersonnelStatus.vue'
import workerHealthMonitor from './components/WorkerHealthMonitor.vue'
import realTimeStats from './components/RealTimeStats.vue'
import highRiskAlert from './components/HighRiskAlert.vue'
import workAreaMonitor from './components/WorkAreaMonitor.vue'
import emergencyContact from './components/EmergencyContact.vue'

export default {
  mixins: [ drawMixin ],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      decorationColor: ['#568aea', '#000000']
    }
  },
  components: {
    personnelStatus,
    workerHealthMonitor,
    realTimeStats,
    highRiskAlert,
    workAreaMonitor,
    emergencyContact
  },
  mounted() {
    this.timeFn()
    this.cancelLoading()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
#bridgeTunnelRiskPlatform {
  color: #d3d6dd;
  width: 1920px;
  height: 1120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
  
  .bg {
    width: 100%;
    height: 100%;
    padding: 16px 16px 0 16px;
    background-image: url("../assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }

  .host-body {
    .dv-dec-10,
    .dv-dec-10-s {
      width: 33.3%;
      height: 5px;
    }
    .dv-dec-10-s {
      transform: rotateY(180deg);
    }
    .dv-dec-8 {
      width: 200px;
      height: 50px;
    }
    .title {
      position: relative;
      width: 700px;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;

      .title-text {
        font-size: 32px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        white-space: nowrap;
        letter-spacing: 2px;
        font-weight: 600;
        color: #4fc3f7;
        text-shadow: 
          0 0 8px rgba(79, 195, 247, 0.4),
          0 2px 4px rgba(0, 0, 0, 0.3);
      }

      .dv-dec-6 {
        position: absolute;
        bottom: -30px;
        left: 50%;
        width: 250px;
        height: 8px;
        transform: translate(-50%);
      }
    }

    // 第二行状态栏
    .aside-width {
      width: 36%;
    }
    .react-r-s,
    .react-l-s {
      background-color: #0f1325;
    }

    .react-right {
      &.react-l-s {
        text-align: center;
        width: 420px;
        padding-left: 15px;
      }
      font-size: 18px;
      width: 280px;
      line-height: 50px;
      text-align: center;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        right: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
      }
    }

    .react-left {
      &.react-l-s {
        width: 420px;
        text-align: center;
        padding-left: 0;
      }
      font-size: 18px;
      width: 280px;
      line-height: 50px;
      text-align: center;
      padding-left: 0;
      transform: skewX(-45deg);

      .react-after {
        position: absolute;
        left: -25px;
        top: 0;
        height: 50px;
        width: 50px;
        background-color: #0f1325;
        transform: skewX(45deg);
      }

      .text {
        display: inline-block;
        transform: skewX(45deg);
        
        .update-tag {
          font-size: 13px;
          color: #50e3c2;
          margin-left: 10px;
          padding: 3px 10px;
          border: 1px solid #50e3c2;
          border-radius: 4px;
          background: rgba(80, 227, 194, 0.1);
          animation: pulse 2s ease-in-out infinite;
        }
      }
    }
    
    @keyframes pulse {
      0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px rgba(80, 227, 194, 0.5);
      }
      50% {
        opacity: 0.7;
        box-shadow: 0 0 10px rgba(80, 227, 194, 0.8);
      }
    }

    .body-box {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1;
      height: 1120px;

      .content-box {
        display: flex;
        justify-content: space-between;
        flex: 1;
        min-height: 0;
        height: 100%;
        gap: 12px;

        .left-panel,
        .right-panel {
          width: 420px;
          height: 1120px;
          display: flex;
          flex-direction: column;
          gap: 12px;

          .panel-item {
            min-height: 0;
            
            &.panel-item-small {
              flex: 0 0 320px;
              height: 320px;
            }
            
            &.panel-item-medium {
              flex: 0 0 640px;
              height:640px;
            }
          }
        }
        
        .right-panel {
          .panel-item {
            &:nth-child(1) {
              flex: 0 0 calc(50% - 6px);
              height: calc(50% - 6px);
            }
            
            &:nth-child(2) {
              flex: 0 0 406px;
              height: 406px;
            }
          }
        }

        .center-panel {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-width: 0;

          .top-row {
            flex: 0 0 calc(40% - 6px);
            height: calc(40% - 6px);
            display: flex;
            gap: 12px;
            
            .stats-container {
              flex: 0 0 calc(50% - 6px);
              width: calc(50% - 6px);
              overflow: hidden;
            }
            
            .reserved-container {
              flex: 0 0 calc(50% - 6px);
              width: calc(50% - 6px);
              overflow: hidden;
              
              .reserved-placeholder {
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.02);
                border: 1px dashed rgba(79, 195, 247, 0.3);
                border-radius: 4px;
                
                p {
                  font-size: 18px;
                  color: #4fc3f7;
                  margin-bottom: 10px;
                  font-weight: bold;
                }
                
                span {
                  font-size: 13px;
                  color: #666;
                }
              }
            }
          }

          .work-area-container {
            flex: 0 0 519px;
            height: 519px;
            min-height: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }
  }
}

// 动态提示标签的呼吸动画效果
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.98);
  }
}
</style>



